import React from 'react';
import './RiskSlider.css'
import CommonUtils from '../../logics/CommonUtils';
// グループ
import healthyGroup from './images/healthyGroup.png'
import normalGroup from './images/normalGroup.png'
import unhealthyGroup from './images/unhealthyGroup.png'

const {
  getFloatFormat,
} = CommonUtils;


class RiskSlider extends React.Component {
  render() {
    const { current, initial, min, max, decimalDigit = 1 } = this.props;
    const currentVal = getFloatFormat(current, decimalDigit);
    const initialVal = getFloatFormat(initial, decimalDigit);
    const minVal = getFloatFormat(min, decimalDigit);
    const maxVal = getFloatFormat(max, decimalDigit);

    const markerX = this._calcMarkerX(currentVal, minVal, maxVal);
    const initialX = this._calcMarkerX(initialVal, minVal, maxVal);

    const Marker = ({ label, lineClass, value, x }) => (
      <div className="marker" style={{ left: `${x}%` }}>
        <div className={`line${lineClass}`} />
        {(value !== undefined && value !== null) &&
          <div className="value" style={{ left: `${this._calcValueLabelX(x)}px` }} >あなた&nbsp;{value.toFixed(decimalDigit)}%</div>
        }
      </div>
    );

    const RiskBar = ({ children }) => (
      <div className="RiskBar">
        <div className="bar-label">
          <div className="group healthy-group">
            <img src={healthyGroup} className="group-icon" alt="" height={40} /><span className="group-label-left">健康グループ</span>
          </div>
          <div className="group normal-group">
            <img src={normalGroup} className="group-icon" alt="" height={40} />
          </div>
          <div className="group unhealthy-group">
            <span className="group-label-right">不健康グループ</span><img src={unhealthyGroup} className="group-icon" alt="" height={40} />
          </div>
        </div>
        <div className="bar">
          {children}
        </div>
      </div>
    )

    return (
      <div className="RiskSlider" ref="RiskSlider">
        <RiskBar>
          <Marker lineClass={''} x={initialX} />
          <Marker lineClass={' current'} x={markerX} value={current} />
        </RiskBar>
      </div>
    );
  }

  _calcMarkerX(target, min, max) {
    const meterRange = max - min;
    const userRange = target - min;
    let p = userRange / meterRange * 100;

    // 0 から 100の間を超えないようにする
    p = p > 100 ? 100 : p;
    p = p < 0 ? 0 : p;

    return p;
  }

  _calcValueLabelX(p) {
    const LABEL_DEFAULT_X = 70; // ラベル幅半分
    const BAR_WIDTH = 560; // バー幅
    const PER_WIDTH = 5.6; // バー幅100％として%あたりのpx

    let x = -LABEL_DEFAULT_X;
    // 左にはみ出ないよう補正
    if (p < ((LABEL_DEFAULT_X / BAR_WIDTH) * 100)) {
      x += ((((LABEL_DEFAULT_X / BAR_WIDTH) * 100) - p) * (PER_WIDTH * 0.8));
    }
    // 右にはみ出ないよう補正
    if (p > (100 - (LABEL_DEFAULT_X / BAR_WIDTH) * 100)) {
      x -= ((p - (100 - (LABEL_DEFAULT_X / BAR_WIDTH) * 100)) * PER_WIDTH);
    }
    x = x.toFixed(0);
    return x;
  }
}

/*RiskSlider.propTypes = {
  current: React.PropTypes.number,
  initial: React.PropTypes.number,
  min: React.PropTypes.number,
  max: React.PropTypes.number,
  decimalDigit: React.PropTypes.number,
};*/

export default RiskSlider
